<template>
	<div>
		<!-- Upper -->
		<Upper :fixBars="fixBars"></Upper>

		<div id="app">
			<div id="J_app">
				<!-- Seckill -->
				<Seckill ref="seckillRef"></Seckill>

				<!-- Special -->
				<Special ref="specialRef"></Special>

				<!-- Channels -->
				<Channels ref="channelRef"></Channels>

				<!-- Feeds -->
				<Feeds ref="feedsRef"></Feeds>

				<!-- Footer -->
				<Footer ref="footerRef"></Footer>

				<!-- 侧边栏/楼层导航 -->
				<Elevator :fixBars="fixBars" @totop="toTop(200)" @tofloor="navToFloor">
					<li v-for="(item,index) in floors" :key="item.name" class="elevator_item" @click="navToFloor(index)">
						<a
							class="elevator_lk"
							href="javascript:void(0);"
							clstag="h|keycount|core|elvt_01"
							tabindex="-1"
							aria-hidden="true"
						>
							<div>
								<span class="elevator_lk_bg"> </span>
								<span class="elevator_lk_txt">{{item.name}}</span>
							</div>
						</a>
					</li>
				</Elevator>
			</div>
		</div>
	</div>
</template>

<script>
	import "./css/first-screen.chunk.css";
	import "./css/index.scss";
	import {
		ref,
		reactive,
		toRefs,
		onMounted,
		onUnmounted,
		watchEffect,
		watch,
	} from "vue";

	// @ is an alias to /src
	import Upper from "./Upper.vue";
	import Seckill from "./Seckill.vue";
	import Special from "./Special.vue";
	import Channels from "./Channels.vue";
	import Feeds from "./Feeds.vue";
	import Footer from "./Footer.vue";
	import Elevator from "./Elevator.vue";

	import useScroll from "@/hooks/useScroll.js";

	export default {
		name: "HomeView",
		components: {
			Upper,
			Seckill,
			Special,
			Channels,
			Feeds,
			Footer,
			Elevator,
		},

		setup() {
			const seckillRef = ref(null);
			const specialRef = ref(null);
			const channelRef = ref(null);
			const feedsRef = ref(null);
			const floors = [
				{ name: "京东秒杀", ref: seckillRef },
				{ name: "特色优选", ref: specialRef },
				{ name: "频道广场", ref: channelRef },
				{ name: "为你推荐", ref: feedsRef },
			];

			const footerRef = ref(null);
			let footerHeight = 0;

			const state = reactive({
				fixBars: false,
			});

			const {
				scrollTop: stRef,
				scrollBottom: sbRef,
				bodyHeight: bhRef,
				toTop,
				yScrollTo,
			} = useScroll();

			const navToFloor = (index) => {
				console.log("index navToFloor", index);
				yScrollTo(
					floors[index].ref.value.$el.getBoundingClientRect().top +
						document.documentElement.scrollTop -
						55,
					200
				);
			};

			onMounted(() => (footerHeight = footerRef.value.$el.clientHeight));

			watch(
				() => sbRef.value,
				() => {
					if (sbRef.value < footerHeight) {
						console.log("加载下一页...");
						feedsRef.value.loadNextPage();
					}
				},
				{
					immediate: false,
				}
			);

			// 监听st
			// if (document.documentElement.scrollTop > 700) {
			// 	/* 事件处理节流 */
			// 	// 通栏出现+边栏固定
			// 	if (!titleBar.classList.contains("search-fix")) {
			// 		titleBar.classList.add("search-fix");
			// 		titleBar.style.top = "0px";

			// 		// 边栏固定
			// 		sideBar.classList.add("elevator_fix");
			// 	}
			// } else {
			// 	/* 事件处理节流 */
			// 	// 通栏出现+边栏固定
			// 	if (titleBar.classList.contains("search-fix")) {
			// 		titleBar.style.top = -titleBar.offsetHeight + "px";
			// 		// 动画做完再移除固定布局
			// 		setTimeout(() => {
			// 			titleBar.classList.remove("search-fix");
			// 		}, 500);

			// 		// 边栏取消固定
			// 		sideBar.classList.remove("elevator_fix");
			// 	}
			// }
			watch(
				() => stRef.value,
				() => {
					if (stRef.value > 700) {
						state.fixBars = true;
					} else {
						state.fixBars = false;
					}
				},
				{
					immediate: false,
				}
			);

			return {
				seckillRef,
				specialRef,
				channelRef,
				feedsRef,
				footerRef,
				toTop,
				yScrollTo,
				navToFloor,
				...toRefs(state),
				floors
			};
		},
	};
</script>

<style lang="css" scoped>
.o2_ie8 .more2_international {
	filter: progid:dximagetransform.microsoft.alphaimageloader(src='//storage.360buyimg.com/mtd/home/more_international1575014601797.png', sizingMethod='scale');
	background: none;
}

.mod_help_cover {
	background-image: none;
}

#settleup:hover .cw-icon {
	border-bottom: 1px solid #c81623;
}

html.o2_gray {
	-webkit-filter: grayscale(100%);
	filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

.o2_mini .company .feed-tab {
	margin: 0 auto;
}

.company .feed-tab {
	margin: 0 auto;
}

.channelsB .channels_block_1 .channels_item_1 .channels_item_link {
	height: 370px;
	width: 290px;
}

.channelsB .channels_block_1 .channels_item_2 .channels_item_link {
	height: 370px;
	width: 290px;
}

.JD_close-button--square {
	z-index: 1;
}
</style>
